<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-image: url(../img/bg.jpg);
			}
			ul,li{
				list-style:none;
			}
			.wp{
				width: 895px;
				height: 405px;
				background-color: #fff;
				margin: 100px auto 0;
			}
			.nav{
				border-bottom: 1px solid #e9e9e9;
			}
			.cl:after{
				content: "";
				display: block;
				clear: both;
			}
			.nav li{
				float: left;
				color: #333;
				font-size: 14px;
				cursor: pointer;
				padding: 11.5px 26px;
			}
			.nav li:hover{
				background-color: #e9e9e9;
				/*font-weight: 700;*/
			}
			.nav .myFocus{
				height: 39px;
			    width: 124px;
			    padding: 0;
			    text-align: center;
			    line-height: 40px;
			}
			.nav .myFocus i{
				display: inline-block;
				width: 15px;
			    height: 15px;
			    background: url(../img/baidu_icon.png) -16px 0;
			}
			.nav .myFocus:hover i{
				background: url(../img/baidu_icon.png) -145px 0;
			}
			.content div{
				height: 366px;
				display: none;
			}
			.content div.show{
				display: block;
			}
		</style>
	</head>
	<body>
		
		<div class="wp">
			<ul class="nav cl">
				<li class="myFocus">
					<i></i>
					我的关注
				</li>
				<li>推荐</li>
				<li>导航</li>
				<li>视频</li>
				<li>购物</li>
			</ul>
			<div class="content">
				<div class="show">我的关注</div>
				<div>推荐</div>
				<div>导航</div>
				<div>视频</div>
				<div>购物</div>
			</div>
		</div>
		
	</body>
</html>
